<script>
	function displayLov(url, selObj) {

		//request the JSON data and parse into the select element
		$.getJSON(url, function(data) {

			//clear the current content of the select
			selObj.html('');

			//iterate over the data and append a select option

			$.each(data, function(idx, obj) {

				selObj.append('<option id="' + idx + '">' + obj + '</option>');
			});

		});

	}
</script>


<div class="container-fluid" xmlns:th="http://www.thymeleaf.org" xmlns:bv="http://bootstrapvalidator.com/">

	<form class="form-horizontal" role="form" th:action="${form.action}" th:id="${form.id}"
		th:method="${form.method}"
		 th:attr="data-bv-feedbackicons-valid='${form.validIcon}', data-bv-feedbackicons-invalid='${form.invalidIcon}', data-bv-feedbackicons-validating='${form.validatingIcon}'"
        >
		
		
		
		<div class="row">
		
			<div class="alert alert-warning alert-dismissible" role="alert">
  				<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  				<strong>Warning!</strong> Better check yourself, you're not looking too good.
			</div>
		
		</div>
		
		<div class="btn-toolbar pull-right" role="toolbar">
			
				<div th:each="b : ${form?.buttonBar?.buttons}" th:remove="tag">
					
					<a th:href="${b.action}" th:class="${b.styleClass}" role="button" th:text="${b.label}" th:if="${#strings.equalsIgnoreCase(b.type,'ANCHOR')}"></a>
					
					<button type="submit" th:class="${b.styleClass}" th:text="${b.label}" th:if="${#strings.equalsIgnoreCase(b.type,'SUBMIT')}"></button>
				</div>
				
		</div>
		
		
		
		<fieldset th:each="sec : ${form.sections}">
			<legend th:text="${sec.header}"></legend>
			<div class="row" th:each="row :  ${sec.rows}">

				<!-- Cell -->
				<div th:class="${cell.styleClass}" th:each="cell,i : ${row.cells}">
					<div class="form-group">
						<label th:for="${cell.id}" th:class="${cell.labelClass}"
							th:text="${cell.label}">Name</label>
						<div th:class="${cell.controlContainerClass}">


							<input type="text" th:class="${cell.control.styleClass}"
								th:id="${cell.id}" th:name="${cell.name}"
								th:placeholder="${cell.label}" bv:validations="${cell.control.validations}"
								th:if="${#strings.equalsIgnoreCase(cell.control.type,'TEXT')}" 
								
								/>


							<input type="number" th:class="${cell.control.styleClass}"
								th:id="${cell.id}" th:name="${cell.name}"
								th:placeholder="${cell.label}" 
								th:if="${#strings.equalsIgnoreCase(cell.control.type,'NUMBER')}" />


							<input type="email" th:class="${cell.control.styleClass}"
								th:id="${cell.id}" th:name="${cell.name}"
								th:placeholder="${cell.label}" bv:validations="${cell.control.validations}"
								th:if="${#strings.equalsIgnoreCase(cell.control.type,'EMAIL')}" 
								/>

							
							<textarea th:class="${cell.control.styleClass}"
								th:id="${cell.id}" th:name="${cell.name}"
								th:rows="${cell.control.rows}" 
								th:if="${#strings.equalsIgnoreCase(cell.control.type,'TEXTAREA')}"></textarea>
							 
							
							
							
								
							<select th:class="${cell.control.styleClass}" th:id="${cell.id}"
								th:name="${cell.name}"
								th:if="${#strings.equalsIgnoreCase(cell.control.type,'SELECT')}">

							</select>


							<script th:inline="javascript"
								xmlns:th="http://www.thymeleaf.org"
								th:if="${#strings.equalsIgnoreCase(cell.control.type,'SELECT')}">
								/*<![CDATA[*/

								/*[+

								var selObj  = $('#' + [[${cell.id}]]);
								 var url  = [[${cell.control.ajaxUrl}]];
								
								+]*/

								displayLov(url, selObj);

								/*]]>*/
							</script>

						</div>



					</div>

				</div>
			</div>
		</fieldset>


		<div class="btn-toolbar pull-right" role="toolbar">
			
				<div th:each="b : ${form?.buttonBar?.buttons}" th:remove="tag">
					
					<a th:href="${b.action}" th:class="${b.styleClass}" role="button" th:text="${b.label}" th:if="${#strings.equalsIgnoreCase(b.type,'ANCHOR')}"></a>
					
					<button type="submit" th:class="${b.styleClass}" th:text="${b.label}" th:if="${#strings.equalsIgnoreCase(b.type,'SUBMIT')}"></button>
				</div>
				
		</div>



	</form>
</div>

<script th:inline="javascript" xmlns:th="http://www.thymeleaf.org">
		/*<![CDATA[*/

		/*[+

		var formObj  = $('#' + [[${form.id}]]);
		
		
		+]*/

		$(document).ready(function() {
			
			
			formObj.bootstrapValidator()
				.on('success.form.bv', function(e) {
				
					
				// Prevent form submission
				e.preventDefault();
				
				
				
				reqData = formObj.serializeJSON();
				
				var URL =  formObj.attr( "action" );
				
				$.ajax({
					type:'POST',
					contentType: 'application/json',
					url: URL,
					dataType: "json",
					data : JSON.stringify(reqData),
			        success: function(data, textStatus, jqXHR){
			            alert('Wine created successfully');
			           

			            
			            
			        },
			        error: function(jqXHR, textStatus, errorThrown){
			            alert('addWine error: ' + textStatus);
			        }
				});
				
				
				
			});
		});

		/*]]>*/
</script>


